<template>
  <div class="watch-container">
    <div class="subinfo" v-for="v in watchResults" :key="v.id">
      <template v-if="v.id !== 4">
        <p class="num">{{ v.value | splitNumber }}</p>
      </template>
      <template v-else>
        <p class="num">{{ v.value }}</p>
      </template>
      <p class="subtitle">{{ v.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'watchResult',
  data() {
    return {
      watchResults: [
        {
          id: 1,
          name: '网格员',
          value: '383',
        },
        {
          id: 2,
          name: '投诉举报收集数',
          value: '',
        },
        {
          id: 3,
          name: '巡查企业/项目数',
          value: '',
        },
        {
          id: 4,
          name: '网格覆盖率',
          value: '100%',
        },
        {
          id: 5,
          name: '投诉举报办结数',
          value: '',
        },
        {
          id: 6,
          name: '完成整改数',
          value: '',
        },
      ],
    }
  },
  mounted() {
    // this.getGridData()
    this.getPatrolData()
    this.getComplaintData('投诉举报收集数', {})
    this.getComplaintData('投诉举报办结数', { type: 'ACCEPTED' })
  },
  methods: {
    // 网格员
    getGridData() {
      return this.axios({
        method: 'post',
        url: 'api-p/gridlink/expand/gridUserCount',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { total } = response.data.result
            this.watchResults[0].value = total
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 巡查/整改
    getPatrolData() {
      return this.axios({
        method: 'post',
        url: 'api-gov/ipqcjobProject/expand/IPQCCount',
        data: {
          // areaId: this.areaId
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { count, finishedCount } = response.data.result
            this.watchResults[2].value = count
            this.watchResults[5].value = finishedCount
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 投诉举报
    getComplaintData(type, data) {
      return this.axios({
        method: 'post',
        url: '/api-c/company/risk/stats/base/complaint/data',
        data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { companyComplaintData } = response.data.result
            const findIndex = this.watchResults.findIndex(
              (v) => v.name === type
            )
            this.watchResults[findIndex].value = companyComplaintData
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.watch-container {
  width: 100%;
  height: 100%;
  padding: 30px 20px 0;
  .subinfo {
    width: calc((100% - 60px) / 3);
    height: calc((100% - 40px) / 2);
    margin: 0 10px 20px;
    text-align: center;
    display: inline-block;
    background-image: url(../../assets/img/rect.png);
    background-size: 100% 100%;
    .num {
      width: 100%;
      margin-top: 12px;
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      background-image: -webkit-linear-gradient(bottom, #ff9b58, #fbcf34);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .subtitle {
      width: 100%;
      margin-top: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
